<template>
<div class="asideWraWpper">
  <div class="lcpLeftNav aside" ref="aside">
    <el-menu :default-active="activeIndex" :default-openeds="openeds">
      <el-submenu :index="sub.index" v-for="sub in menu" :key="sub.index"
                  v-permission="sub.permission||'normal'">
        <template slot="title" >
          <i :class="['menuIcon','iconfont',sub.iconFont]"></i>
          <span>{{ sub.name }}</span>
        </template>
        <el-menu-item
          :index="item.index"
          v-for="item in sub.children"
          :key="item.index"
        >
          <router-link :to="item.to">
            <i :class="['menuIcon','iconfont',item.iconFont]"></i>
            <span>{{ item.name }}</span>
          </router-link>
        </el-menu-item>
      </el-submenu>
    </el-menu>
    <p class="stepping"></p>
  </div>
</div>

</template>

<script>
import { find, flatMap } from 'lodash'
import Scrollbar from 'smooth-scrollbar'

export default {
  props: { actived: { type: null }, menu: { type: Array } },
  data () {
    return {
      activeIndex: '',
      openeds: ['1']
    }
  },
  computed: {
    flatMenu () {
      function flat (nodes, tar) {
        for (const node of nodes) {
          tar.push(node)

          if (node.children && node.children.length > 0) {
            flat(node.children, tar)
          }
        }
        return tar
      }
      return flat(this.menu, [])
    }
  },
  watch: {
    activeIndex () {

      this.changedIndex()
    },
  },
  methods: {
    changeByPath () {
      let i = this.flatMenu.find(item => item.to === this.$route.path)
      this.openeds = [i.index.split('-')[0]]

      this.activeIndex = i.index
    },
    changedIndex () {

      let flat = flatMap(this.menu, i => [i, ...i.children])
      this.$emit('update:actived', find(flat, { index: this.activeIndex }).name)
    }
  },
  mounted () {
    Scrollbar.init(this.$refs.aside)
    this.changeByPath()
  }
}
</script>

<style lang="scss" scoped>
.asideWraWpper{
   height: 100%;
   background-color: #ffffff;
   flex:0 0 220px;
}
.aside {
  flex: 0 0 220PX;
  height: 100%;

  border-right: 1px solid #f0f0f0;
  box-sizing: border-box;
  overflow: auto;
  background: url('~@/assets/img/slide-bg.png') center no-repeat;
  background-size: 100% 100%;

  .stepping{
    height: 40px;
  }
}
.menuIcon {
  width: 18px;
  margin-right: 5px;
  color: #FFFFFF;
}
.lcpLeftNav .el-menu{
  border-right: none;
}

.el-submenu .el-menu-item:hover {
  background-color: #F7F8FF;
}
.el-menu-item.is-active {
  border-right: 4px solid #0B085F;
  background-color: #F7F8FF;
}
.el-submenu .el-menu-item a {
  display: block;
  width: 100%;
  height: 40px;
  padding-left: 34px;
  line-height: 40px;
  color: #666666;
  box-sizing: border-box;
}
.el-submenu .is-active a {
  color: #0B085F;
  background: #EFEFF4;
}
.el-submenu .el-menu-item{
  min-width: 220px;
  padding: 0 !important;
  height: 40px;
  background: #EFEFF4;
  color: #8B8BA0;
}

.el-submenu .el-menu-item:hover{
  background: transparent;
}
.el-menu-item:hover span{
  color: #0B085F;
}
</style>
<style scoped>
/deep/ .el-menu{
  background: transparent;
}
.el-menu-item.is-active{
  border-right: 0;
  background: transparent;
}

/deep/ .el-submenu__title{
  color: #FFFFFF;
}
/deep/ .el-submenu__title i{
  color: #FFFFFF;
}
/deep/ .el-submenu__title:hover{
  color: #0B085F;
}
/deep/ .el-submenu__title:hover i{
  color: #0B085F;
}
/deep/ .el-submenu__title:hover .menuIcon{
  color: #0B085F;
}
/deep/ .el-submenu.is-opened{
  background: #FFFFFF;
}
/deep/ .el-submenu.is-opened .el-submenu__title{
  color: #0B085F;
}
/deep/ .el-submenu.is-opened .el-submenu__title i{
  color: #0B085F;
}
/deep/ .el-submenu.is-opened .el-submenu__title .menuIcon {
  color: #0B085F;
}
</style>
